<template>
  <div>
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>Banner管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="margin:1.5% 0 0 2%">
      <div style="margin-bottom: 1%">
        <span>位置：<el-select type="text" style="width: 12%" size="small">
          <el-option label="全部" value=""></el-option>
        </el-select></span>
        <span>状态：<el-select type="text" style="width: 12%" size="small">
          <el-option label="全部" value=""></el-option>
        </el-select></span>
        <el-button type="primary" size="small" style="margin-left: 1%">搜索</el-button>
        <el-button size="small">重置</el-button>
      </div>
      <hr>
      <div>
        <el-button type="primary" size="small" @click="addBanner">+添加banner</el-button>
      </div>
      <el-table size="small" border :data="bannerFrom" style="margin-top: 1%">
        <el-table-column align="center" sortable prop="bbn_imguri[0].url" label="banner图" width="150">
          <template #default="scope">
            <el-image
              style="width: 80px; height: 50px"
              :src="scope.row.bbn_imguri[0].url"
              :preview-src-list="[scope.row.bbn_imguri[0].url]"
              fit="cover"
            >
              <template #error>
                <div class="image-error">加载失败</div>
              </template>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="bbn_wz" label="展示设置"/>
        <el-table-column prop="bbn_pxname" label="状态/展示排序"/>
        <el-table-column prop="bbn_desc" label="跳转链接"/>
        <el-table-column prop="create_time" label="创建时间">
          <template v-slot="scope">
            {{ timefromate(scope.row.create_time)}}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template v-slot="scope">
<!--            <el-link  type="primary" v-if="scope.row.bbn_pxname != '未发布'" @click="unpublicBanner(scope.$index, scope.row)" >下架</el-link>-->
            <el-link type="primary" @click="editBanner(scope.$index, scope.row)">编辑</el-link>
            <el-link type="primary" @click="delteBanner(scope.$index, scope.row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
<!--      <el-pagination-->
<!--        v-model:current-page="currentPage4"-->
<!--        v-model:page-size="pageSize4"-->
<!--        :page-sizes="[10, 20, 30, 40]"-->
<!--        :size="size"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="400"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--      />-->
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue'
import {deletebanner, querybannerlist} from "../../api/InstitutionApi";
import { formatDate } from '../../utils/util'

export default {
  name: "index",
  data() {
    return {
      bannerFrom:[]

    }
  },
  created() {
    this.selectBannerlist()
  },
  methods: {
    // 查询bannerlist所有
    selectBannerlist() {
      querybannerlist().then(res => {
        console.log('bannerlist',res)
        this.bannerFrom = res.data.data.base_info
      })

    },
    addBanner() {
      // 跳转页面的三种方式
      // 方式1：通过 path 跳转
      // this.$router.push({
      //   path: `/enterprises/EnEdit/:index`
      // });
      // 方式2：通过 name 跳转（推荐）
      // this.$router.push({
      //   name: 'enedit',
      //   params: { index: index }
      // });
      // 方式3：带查询参数（显示在URL中）
      this.$router.push({
        path: '/banner/Edit',
        query: ''
      });
    },
    // 编辑banner
    editBanner(index,row) {
      this.$router.push({
        path: '/banner/Edit',
        query: {'bannerrow': row}
      });
    },
    // 删除banner
    delteBanner(index,row) {
      deletebanner({
        "bbncode": row.bbn_code
      }).then( res => {
        console.log('delete:',res)
        this.selectBannerlist()
      })
    },
    timefromate(timedata) {
      return formatDate(timedata)
    },


  }
}
</script>

<style scoped>
.el-pagination{
  margin-top: 1%;
  float: right;
}
</style>
